<template>
  <div id="groupIntro" class="back-div">
    <div>
      <div class="groupIntroLogoBack" :style="{backgroundImage: 'url(' + groupInfo.groupLogo + ')'}">
      </div>
      <div class="groupIntroLogo">
          <div class="logo-wrap">
            <img class="logo-img" :src=(groupInfo.groupLogo) />
            <div style="color:#353535;font-size:16px; padding-top: 5px;">{{ groupInfo.groupName }}</div>
          </div>
          <div style="color:#353535;font-size:16px;padding-top: 5px;">
            <span>{{ groupInfo.groupSlogan }}</span>
          </div>
      </div>
    </div>
    <div style="margin-top:200px;">
      <group>
        <cell style="color:#999;font-size:16px;" title="团队活动" :link="{ path: '/activity/groupActivity', query: { id: groupInfo.id }}"></cell>
      </group>
      <card style="padding-bottom: 10px;"> 
          <div slot="content" class="card-padding">
          <p style="color:#999;font-size:14px;margin-bottom:5px;">团队成员</p>
          <ul class="participate-img">
              <li v-for="customer in customerList">
                <img :src=customer.avatar />
              </li>
          </ul>
          </div>
      </card>
      <div style="margin-top:10px;">
        <div v-if="isJoin==0">
          <div class="fly-btn-10" @click="joinGroup">申请加入</div>
        </div>
        <div v-if="isJoin==1">
          <div class="fly-btn-10" @click="outGroup">退出团队</div>
        </div>
      </div>
      <group>
        <div style="text-align: center;color:#999;font-size:16px;padding:10px;">
          <div style="padding-bottom:10px;">/团队介绍/</div>
          <p>{{ groupInfo.groupIntro }}</p>
        </div>
      </group>
    </div>
      <div v-transfer-dom>
        <confirm v-model="show1"
        title="报名参加"
        @on-cancel="onCancel1"
        @on-confirm="onConfirm1"
        @on-show="onShow1"
        @on-hide="onHide1">
          <p style="text-align:center; margin-bottom: 5px;">请填写手机号</p>
          <input type="number" id="phone" style="height: 26px;text-align: center;font-size: 14px;"/>
        </confirm>
      </div>
      <div v-transfer-dom>
        <confirm v-model="show2"
        title="报名参加"
        @on-cancel="onCancel2"
        @on-confirm="onConfirm2"
        @on-show="onShow2"
        @on-hide="onHide2">
          <p style="text-align:center;">您确定报名加入该团队?</p>
        </confirm>
      </div>
      <div v-transfer-dom>
        <confirm v-model="show3"
        title="退出团队"
        @on-cancel="onCancel3"
        @on-confirm="onConfirm3"
        @on-show="onShow3"
        @on-hide="onHide3">
          <p style="text-align:center;">您确定退出该团队?</p>
        </confirm>
      </div>
      <toast v-model="showToast1" @on-hide="onHideToast1">申请成功</toast>
      <toast v-model="showToast2" @on-hide="onHideToast2">退出成功</toast>
  </div>
</template>

<script>
import { Divider, Card, Group, Cell, CellBox, Confirm, Toast, TransferDom } from 'vux'
import { getCustomerId, getCustomerBase } from '../utils/utils'
import { getAuthInfo } from '../utils/common'

export default {
  directives: {
    TransferDom
  },
  components: {
    Card,
    Divider,
    Group,
    Cell,
    CellBox,
    Confirm,
    Toast
  },
  data () {
    return {
      show1: false,
      show2: false,
      show3: false,
      showToast1: false,
      showToast2: false,
      isJoin: '',
      isHavPhone: '',
      groupInfo: [],
      customerList: [],
      groupId: '',
      customerid: getCustomerId(),
      customerBase: getCustomerBase()
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  created: function () {
    getAuthInfo('home')
  },
  mounted: function () {
    console.log('请求参数')
    console.log(this.$router.currentRoute.query.id)
    this.groupId = this.$router.currentRoute.query.id
    var that = this
    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json'},
      data: {
        'groupId': that.groupId,
        'customerId': that.customerid
      },
      method: 'post'
    }
    this.$ajax('api/cms/activity/interestGroup/info', config).then(function (response) {
      console.log('加载团队信息')
      console.log(response)
      var groupData = response.data.data.interestGroup
      var customerData = response.data.data.customerList
      that.groupInfo = groupData
      that.customerList = customerData
      that.isJoin = response.data.data.isJoin
      that.isHavPhone = response.data.data.isHavPhone
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    onCancel1 () {
      console.log('on cancel')
    },
    onConfirm1 (msg) {
      var phone = document.getElementById('phone').value
      console.log(document.getElementById('phone').value)
      let that = this
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'groupId': that.groupId,
          'customerId': that.customerid,
          'customerPhone': phone
        },
        responseType: 'json',
        method: 'post'
      }
      this.$ajax('api/cms/activity/joinGroup', config).then(function (response) {
        console.log(response)
        console.log(that.customerBase.avatar)
        that.isJoin = response.data.data.isJoin
        var customerData = response.data.data.customerList
        that.customerList = customerData
      }).catch(function (error) {
        console.log(error)
      })
      this.showToast1 = true
    },
    onHide1 () {
      console.log('on hide')
    },
    onHideToast1 () {
      console.log('on onHideToast')
    },
    onHideToast2 () {
      console.log('on onHideToast')
    },
    onShow1 () {
      console.log('on show')
    },
    onCancel2 () {
      console.log('on cancel')
    },
    onConfirm2 (msg) {
      let that = this
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'groupId': that.groupId,
          'customerId': that.customerid
        },
        responseType: 'json',
        method: 'post'
      }
      this.$ajax('api/cms/activity/joinGroup', config).then(function (response) {
        console.log(response)
        console.log(that.customerBase.avatar)
        that.isJoin = response.data.data.isJoin
        var customerData = response.data.data.customerList
        that.customerList = customerData
      }).catch(function (error) {
        console.log(error)
      })
      this.showToast1 = true
    },
    onHide2 () {
      console.log('on hide')
    },
    onShow2 () {
      console.log('on show')
    },
    onCancel3 () {
      console.log('on cancel')
    },
    onConfirm3 (msg) {
      let that = this
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'groupId': that.groupId,
          'customerId': that.customerid
        },
        responseType: 'json',
        method: 'post'
      }
      this.$ajax('api/cms/activity/outGroup', config).then(function (response) {
        console.log(response)
        console.log(that.customerBase.avatar)
        that.isJoin = response.data.data.isJoin
        var customerData = response.data.data.customerList
        that.customerList = customerData
      }).catch(function (error) {
        console.log(error)
      })
      this.showToast2 = true
    },
    onHide3 () {
      console.log('on hide')
    },
    onShow3 () {
      console.log('on show')
    },
    joinGroup: function (event) {
      console.log('show ishavePhone')
      console.log(this.isHavPhone)
      if (this.isHavPhone === '1') {
        console.log('有电话')
        this.show2 = true
      } else {
        console.log('没电话')
        this.show1 = true
      }
    },
    outGroup: function (event) {
      this.show3 = true
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.back-div{
  background-color: #fbf9fe;
}
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 10px 0px 10px 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

.groupIntroLogoBack{
  position:absolute;
  top: 0;
  left: 0;
  z-index:-1;
  width: 100%;
  height:200px;
  background-color:#ffcec5;
  background-repeat:no-repeat;
  opacity:0.5;
}

.groupIntroLogo{
  position:absolute;
  top: 0;
  left: 0;
  z-index:1;
  width: 100%;
  height:200px;
  background-repeat:no-repeat;
  text-align: center;
}
.logo-wrap {
    width: 200px;
    height: 130px;
    text-align: center;
    margin: 0 auto;
    padding-top: 20px;
}
.logo-img{
    height: 100px;
    width: 100px;
    border-radius: 6px;
}
.participate-img li{
  width:40px;
  height:40px;
  float:left;
  display:inline;
  margin-left:5px;
}
.participate-img li img{
  width:40px;
  height:40px;
  border-radius: 50%;
}
.fly-btn-10{
    display:block;
    margin:auto;
    width:96%;
    height:42px;
    line-height:42px;
    text-align: center;
    border-radius:4px;
    background-color:#ff6769;
    cursor: pointer;
    color:#fff;
}
</style>
